<template>
  <div class="pay-message">
    <el-row :gutter="15">
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <el-form>
              <el-form-item label="缴费人员">
                <el-input v-model="queryInfo.username" placeholder="请输入缴费人员" clearable></el-input>
              </el-form-item>
              <el-form-item label="缴费名称">
                <el-input v-model="queryInfo.payname" placeholder="请输入缴费名称" clearable></el-input>
              </el-form-item>
              <el-form-item label="支付类型">
                <el-input v-model="queryInfo.costtype" placeholder="请输入支付类型" clearable></el-input>
              </el-form-item>
              <el-form-item label="支付状态">
                <el-select v-model="queryInfo.coststatus" clearable placeholder="请选择支付状态" style="width: 100%;">
                  <el-option label="已支付" value="1"></el-option>
                  <el-option label="未支付" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="支付时间">
                <el-date-picker v-model="queryInfo.costtime" type="daterange" placeholder="选择支付时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="缴费金额">
                <el-input v-model="queryInfo.paymoney" placeholder="请输入缴费金额" clearable></el-input>
              </el-form-item>
              <el-form-item label="缴费优先级" v-if="showMore">
                <el-input v-model="queryInfo.paylevel" placeholder="请输入缴费优先级" clearable></el-input>
              </el-form-item>
              <div class="button-container">
                <el-button @click="toggleMore" :icon="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" class="no-border-button">{{ showMore ? '收起' : '更多' }}</el-button>
              </div>
            </el-form>
            <div class="form-buttons">
              <el-button type="reset" @click="reset()">重置</el-button>
              <el-button type="primary" @click="getMessage()">立即查询</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <el-row>
            <el-col :span="18">
              <span class="list-title">缴费列表</span>
            </el-col>
            <el-col :span="6" style="text-align: right;">
              <el-button type="primary" size="small" @click="exportExcel" icon="el-icon-download">导出</el-button>
            </el-col>
          </el-row>
          <el-table ref='multipleTable' :data="userList" tooltip-effect="dark" v-loading="loading" label-width="120px">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="缴费产品" align="center">
              <template slot-scope="scope">{{ scope.row.payname }}</template>
            </el-table-column>
            <el-table-column label="缴费人员" align="center">
              <template slot-scope="scope">{{ scope.row.username }}</template>
            </el-table-column>
            <el-table-column label="支付类型" align="center">
              <template slot-scope="scope">{{ scope.row.costtype }}</template>
            </el-table-column>
            <el-table-column label="缴费金额" align="center">
              <template slot-scope="scope">{{ scope.row.paymoney }}</template>
            </el-table-column>
            <el-table-column label="缴费优先级" align="center">
              <template slot-scope="scope">{{ scope.row.paylevel }}</template>
            </el-table-column>
            <el-table-column label="支付时间" align="center">
              <template slot-scope="scope">{{ scope.row.costtime }}</template>
            </el-table-column>
            <el-table-column label="支付状态" align="center">
              <template slot-scope="scope">{{ getStatusLabel(scope.row.coststatus) }}</template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="detail(scope.$index)">查看</el-button>
                <el-button type="text" size="mini" @click="exportSingleRecord(scope.$index)">导出</el-button>
                <el-button type="text" size="mini" @click="handleDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination style="text-align: right; margin-top: 10px;" :page="queryInfo.currPage"
            :componentTotal="userTotal" @changeRows="setRows" @changePage="setPage">
          </pagination>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { excelExportUseJson, excelImport } from "../../assets/js/xlsx";
import Pagination from '@/components/Pagination'

export default {
  data() {
    return {
      queryInfo: {
        username: "",
        payname: "",
        costtype: "",
        coststatus: "",
        costtime: "",
        paymoney: "",
        paylevel: "",
        currPage: 0, // 当前页数
        pageNum: 10, // 每页显示多少数据
      },
      userList: [],
      userTotal: 0,
      loading: false,
      showMore: false,
      statusOptions: [
        { label: "已支付" , value: '1' },
        { label: "未支付", value: '2'  }
      ],
      listHeader: {
        payname: "缴费产品",
        username: "缴费人员",
        costtype: "支付类型",
        paymoney: "缴费金额",
        paylevel: "缴费优先级",
        costtime: "支付时间",
        coststatus: "支付状态",
      },
    };
  },
  mounted(){
    this.getMessage()
  },
  computed: {
    getStatusLabel() {
      return (coststatus) => {
        const status = this.statusOptions.find(option => option.value == coststatus);
        return status ? status.label : '未支付';
      };
    }
  },
  components: { Pagination },
  methods: {
    exportExcel() {
      excelExportUseJson(this.userList, this.listHeader, "用户信息表");
    },
    importExcel(file,) {
      console.log(file)
      excelImport(file.raw, 'json').then(res => {
        
        res = res.map(item => {
          let newUserFrom = {};
          for(let [headerKey, headerVal] of Object.entries(this.listHeader)){
            newUserFrom[headerKey] = item[headerVal]
          }
          newUserFrom.passWord = "123456"
          return newUserFrom
        })
        console.log(res)
        // res.map(el => {
        //   this.addForm(el)
        // })
      })
    },
    reset() {
      this.queryInfo = {
        username: "",
        payname: "",
        costtype: "",
        coststatus: "",
        costtime: "",
        paymoney: "",
        paylevel: "",
        currPage: 0, // 当前页数
        pageNum: 10, // 每页显示多少数据
      };
      this.getMessage()
    },
    // 分页器
    setRows(val) {
      this.queryInfo.pageNum = val;
      this.getUnit();
    },
    setPage(val) {
      this.queryInfo.currPage = val - 1;
      this.getUnit();
    },
    toggleMore() {
      this.showMore = !this.showMore;
    },
    async getMessage(){
      try {
        const { data: res } = await this.axios.get('/cost/getPayMessage', {
          params: {
            currPage: 1,
            pageNum: 10,
            username: this.queryInfo.username,
            payname: this.queryInfo.payname,
            costtype: this.queryInfo.costtype,
            coststatus: this.queryInfo.coststatus,
            costtime: this.queryInfo.costtime,
            paymoney: this.queryInfo.paymoney,
            paylevel: this.queryInfo.paylevel
          }
        });
        console.log('查询结果:', res);
        this.userList = res.data;
        this.userTotal = res.total;
      } catch (error) {
        console.error('查询失败:', error);
        this.$message({
          type: "error",
          message: "查询失败，请稍后再试！"
        });
      }
    },
    async handleDelete(index) {
      try {
        await this.$confirm("是否删除该条数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });

        const { data: res } = await this.axios.get('/cost/delCostData', {
          params: {
            id: this.userList[index].id,
            token: sessionStorage.token
          }
        });

        console.log('删除结果:', res);
        this.$message({
          type: "success",
          message: "删除成功!"
        });

        // 刷新数据
        this.getMessage();
      } catch (error) {
        if (error.response) {
          this.$message({
            type: "error",
            message: "删除失败，请稍后再试！"
          });
        } else {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        }
      }
    },
    async detail(index) {
      this.$router.push({ name: "PayDetail", query: { detailId: this.userList[index].id } })
    },
    exportSingleRecord(index) {
      const singleRecord = [this.userList[index]];
      excelExportUseJson(singleRecord, this.listHeader, "单条记录导出");
    },
    // handleEdit(index) {
    //   // 处理编辑操作
    // }
  }
};
</script>

<style scoped lang="scss">
.pay-message {
  padding: 20px;
}

.button-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  /* 调整间距 */
}

.no-border-button {
  border: none;
  /* 去掉边框 */
  background-color: transparent;
  /* 透明背景 */
  color: #409EFF;
  /* 颜色可自定义 */
  cursor: pointer;
  /* 鼠标悬停样式 */
}

.el-row {
  overflow: hidden;
}

.list-title {
  font-size: 24px;
  color: #303133;
}

.form-buttons {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>